<template>
  <div class="app-container calendar-list-container"> 
    <div class="filter-container">
      <el-button  type='button' icon="el-icon-circle-plus-outline" class='el-button el-button--primary' @click="newFormVisible = true">{{$t('recharge.Add')}}</el-button>
    </div>
    <!-- 充值列表表格 -->
    <el-table
      :data="income"
      border
      v-loading='loading.income'
      style="width: 100%">
      <el-table-column prop="index" :label="$t('recharge.Number')"> </el-table-column>
      <el-table-column :label="$t('recharge.Top_up_amount')">
        <template slot-scope="scope">
          {{scope.row.rechargePrice + $t('recharge.yuan')}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('recharge.Offered_coupon_amount_')">
        <template slot-scope="scope">
          {{scope.row.couponPrice + $t('recharge.yuan')}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('recharge.Validity_period')">
        <template slot-scope="scope">
          {{scope.row.indate + $t('recharge.day')}}
        </template>
      </el-table-column>
      <el-table-column  :label="$t('recharge.Operate')"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="fx">
            <el-button  size="mini" type="primary" @click="upList(scope.row)">{{$t('recharge.Modify')}}</el-button>
            <el-button  size="mini" type="danger" @click="del(scope.row.id)">{{$t('recharge.Delete')}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
        background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="listQuery.pageNo" 
        :page-sizes="[10, 20, 30, 40]" 
        :page-size="listQuery.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total1">
      </el-pagination>
    </div>
    <!-- 修改优惠券 -->
    <el-dialog :title="$t('recharge.Modify_the_recharge_package')" :visible.sync="upFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="upform" :rules='bindRules1' ref="bindForm1">
        <el-form-item :label="$t('recharge.Top_up_amount')" :label-width="formLabelWidth" prop="rechargePrice">
          <el-input v-model="upform.rechargePrice" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.yuan')}}
        </el-form-item>
        <el-form-item :label="$t('recharge.Offered_coupon_amount')" :label-width="formLabelWidth" prop='couponPrice'>
          <el-input v-model="upform.couponPrice" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.yuan')}}
        </el-form-item>
        <el-form-item :label="$t('recharge.Validity_period')" :label-width="formLabelWidth" prop='indate'>
          <el-input v-model="upform.indate" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.day')}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upFormVisible = false">{{$t('recharge.Cancel')}}</el-button>
        <el-button type="primary" @click="upFormData">{{$t('recharge.Submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 新增套餐 -->
    <el-dialog :title="$t('recharge.Add_a_top_up_package')" :visible.sync="newFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="form" :rules='bindRules' ref="bindForm">
        <el-form-item :label="$t('recharge.Top_up_amount')" :label-width="formLabelWidth" prop="rechargePrice">
          <el-input v-model="form.rechargePrice" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.yuan')}}
        </el-form-item>
        <el-form-item :label="$t('recharge.Offered_coupon_amount')" :label-width="formLabelWidth" prop='couponPrice'>
          <el-input v-model="form.couponPrice" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.yuan')}}
        </el-form-item>
        <el-form-item :label="$t('recharge.Validity_period')" :label-width="formLabelWidth" prop='indate'>
          <el-input v-model="form.indate" type="number" style="width:200px;margin-right:10px"></el-input>{{$t('recharge.day')}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newFormVisible = false">{{$t('recharge.Cancel')}}</el-button>
        <el-button type="primary" @click="newTop">{{$t('recharge.Submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRechargeList , addRecharge ,updateRecharge, updateRechargeIsFlag , getRechargeInfo} from '@/api/topUp'
export default {
  name: 'topUp_package',
  data() {
    return {
      total1: 0,
      income: [],
      listQuery:{
        pageNo: 1,
        pageSize: 10,
      },
      loading: {
        income: false,
        withdraw: false,
        reject:false
      },
      upFormVisible: false,
      newFormVisible: false,
      formLabelWidth: '120px',
      form:{
        rechargePrice:'',
        couponPrice:'',
        indate:'',
      },
      upform:{
        id:'',
        rechargePrice:'',
        couponPrice:'',
        indate:'',
      },
      bindRules:{
        rechargePrice: [
          { required: true, message: this.$t('recharge.Please_enter_the_recharge_amount'), trigger: 'change' }
        ],
        indate: [
          { required: true, message: this.$t('recharge.Please_enter_a_valid_period'), trigger: 'blur' },
        ],
      },
      bindRules1:{
        rechargePrice: [
          { required: true, message: this.$t('recharge.Please_enter_the_recharge_amount'), trigger: 'change' }
        ],
        couponPrice: [
          { required: true, message: this.$t('recharge.Please_enter_a_gift_voucher'), trigger: 'blur' }
        ],
        indate: [
          { required: true, message: this.$t('recharge.Please_enter_a_valid_period'), trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    //获取收入明细列表
    async getList(){
      this.loading.income = true
      const { data } = await  getRechargeList(this.filters)
      this.income = data.records.map((item,index)=>({
        index:index+1,
        ...item
      })) 
      this.total1 = data.total
      this.loading.income = false
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    //新增套餐
    newTop(){
      this.$refs['bindForm'].validate(async (valid) => {
      if(valid){
        this.loading.income=true
        try{
          const { data } = await addRecharge({
            rechargePrice:this.form.rechargePrice,
            couponPrice:this.form.couponPrice,
            indate:parseInt(this.form.indate),
          })
          this.newFormVisible = false
          this.$message({
            type: 'success',
            message: this.$t('recharge.added_successfully')
          })
          this.getList();
        }catch (error) {
          
        }
        this.loading.income = false
        }  
      })
    },
    // 修改套餐
    async upList(item){
      this.upform.id = item.id;
      this.upFormVisible = true;
      this.upform.rechargePrice = item.rechargePrice
      this.upform.couponPrice = item.couponPrice
      this.upform.indate = item.indate
    },
    // 修改成功
    upFormData(){
      this.$refs['bindForm1'].validate(async (valid) => {
      if(valid){
        this.loading.income=true
        try {
          const { data } = await updateRecharge(this.filterForm)
          this.upFormVisible = false
          this.$message({
            type: 'success',
            message: this.$t('recharge.Successfully_modified')
          })
          this.$refs['bindForm1'].resetFields()
          this.getList();
        }catch (error) {
          
        }
        this.loading.income = false
        }   
      })
    },
    del(myid){
      this.$confirm(this.$t('recharge.Is_to_delete_the_recharge_package'), this.$t('recharge.Tip'), {
          confirmButtonText: this.$t('recharge.Submit'),
          cancelButtonText: this.$t('recharge.Cancel'),
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: this.$t('recharge.successfully_deleted')
          });
          this.delList(myid)
        }).catch(() => {          
        });
    },
  // 删除套餐
  async delList(myid){
    try { 
      const { data } = await updateRechargeIsFlag({
        id:myid
      })
      this.$message({
        type: 'success',
        message: this.$t('recharge.successfully_deleted')
      });
      this.getList()
      }catch (error) {
        
      }
    },
  },
  computed: {
    filters() {
      return {
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
      }
    },
    // 修改数据
    filterForm(){
      return {
        id:this.upform.id,
        rechargePrice:this.upform.rechargePrice,
        couponPrice:this.upform.couponPrice,
        indate:this.upform.indate,
      }
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style lang='scss' scoped>
.cell {
  a {
    color: #409eff;
  }
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-card /deep/ .el-card__header{
    border-bottom: none
}  
</style>
